<template>
	<div class="app">
		<div>
			<h3 class="title"><span style="color: green;">公众监督数据管理/</span>指派网格员</h3>
		</div>
		<div class="show">
			<el-descriptions
			    :column="1"
			    border
			  >
				<template #title>
					<h3>公众监督数据详情</h3>
				</template>
				<template #extra>
			        <el-button type="primary" @click="back" plain>返回</el-button>
				</template>
			    <el-descriptions-item label="公众监督反馈信息编号">
					<template #default>
						{{detailsData.id}}
					</template>
				</el-descriptions-item>
			    <el-descriptions-item label="反馈者信息">
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.Sname}}
						</template>
					</el-tag>
				</el-descriptions-item>
			    <el-descriptions-item label="反馈者联系电话">
					<template #default>
						{{detailsData.Sphone}}
					</template>
				</el-descriptions-item>
				<el-descriptions-item label="反馈信息所在地址">
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.province.name}}
						</template>
					</el-tag>
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.city.name}}
						</template>
					</el-tag>
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.address}}
						</template>
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="反馈信息描述">
					<template #default>
						{{detailsData.message}}
					</template>
				</el-descriptions-item>
				<el-descriptions-item label="预估等级">
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.level}}
						</template>
					</el-tag>
				</el-descriptions-item>
			    <el-descriptions-item label="反馈日期时间">
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.date}}
						</template>
					</el-tag>
					<el-tag size="small" class="tag">
						<template #default>
							{{detailsData.time}}
						</template>
					</el-tag>
			    </el-descriptions-item>
			  </el-descriptions>
		</div>
		<div class="operation">
			<div class="flag">
				<el-form-item label="是否异地指派" prop="flag" @click="changeShow">
					<el-switch v-model="flag"/>
				</el-form-item>
			</div>
			<div class="provinceSearch">  <!-- 按所在省查询 -->
			 	<el-form-item label="省区域" prop="province">
					<el-select  v-model="reqdata.province" placeholder="请选择省份" style="width: 150px" @focus="getProvince" @blur="emptyProvince" >
						  <el-option
							v-for="item in provinceList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						  />
						</el-select>
			 	</el-form-item>
			</div>
			<div class="citySearch">  <!-- 按所在市查询 -->
				<el-form-item label="市区域" prop="city">
					<el-select v-model="reqdata.city" placeholder="全部" style="width: 150px" @focus="getCity" @blur="emptyCity">
						  <el-option
							v-for="item in cityList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						  />
						</el-select>
				</el-form-item>
			</div>
			<div class="grider">
				<el-form-item :label="showGrider" prop="city">
					<el-select v-model="reqdata.grider" placeholder="全部" style="width: 150px" @focus="getGrider" @blur="emptyGrider">
						  <el-option
							v-for="item in griderList"
							:key="item.admin_code"
							:label="item.name"
							:value="item.admin_code"
						  />
						</el-select>
				</el-form-item>
			</div>
			<div class="button">
				<el-button type="primary" @click="assign" plain>{{showButton}}</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import axios from "axios"
	import { ref,reactive,onMounted} from "vue"
	import { useRoute,useRouter} from 'vue-router'
	import { ElMessage } from 'element-plus'
	let route = useRoute()
	let router = useRouter()
	let flag = ref(false)
	let reqdata = reactive({
		province : null,
		city : null,
		grider : null
	})
	let provinceList = reactive([])
	let cityList = reactive([])
	let griderList = reactive([])
	let showGrider = ref("指派给")
	let showButton = ref("指派")
	let detailsData = JSON.parse(route.query.data)
	console.log(detailsData)
	//根据指派状态获取省表
	let getProvince = function(){
		if(flag.value==false){
			provinceList.push(detailsData.province)
		}
		else{
			axios.get("http://localhost:7000/service-nepm/administrator/getProvinceExcept",
			{
				params:{province:detailsData.province.id}
			},
			).then(res=>{provinceList.splice(0,provinceList.length,...res.data);console.log(provinceList);})
		}
	}
	//根据指派状态获取市表
	let getCity = function(){
		if(flag.value==false){
			cityList.push(detailsData.city)
		}
		else{
			axios.get(
				"http://localhost:7000/service-nepm/administrator/getCity",
				{
					params : {id : reqdata.province , cid : detailsData.city.id}
				}
				).then(res=>{cityList.splice(0, cityList.length, ...res.data); console.log(cityList);})
		}
	}
	//根据省市获取对应的网格员
	let getGrider = function(){
		axios.get("http://localhost:7000/service-nepm/administrator/getGriders",
		{
			params : {id:reqdata.province,cid:reqdata.city}
		}).then(res=>{griderList.splice(0,griderList.length,...res.data);console.log(griderList);})
	}
	//切换控件显示状态（异地or非异地指派）
	let changeShow = function(){
		console.log(flag)
		reqdata.province=null;
		reqdata.city=null;
		reqdata.grider=null;
		if(flag.value==true){
			showGrider.value="异地指派给"
			showButton.value="异地指派"
			console.log(showGrider.value)
		}
		else{
			showGrider.value="指派给"
			showButton.value="指派"
		}
	}
	//进行指派，完成后返回到列表页面
	let assign = function(){
		if(reqdata.grider==null){
			ElMessage.warning("请选择网格员")
			return
		}
		axios.get("http://localhost:7000/service-nepm/administrator/updateMesg",
		{
			params:{bindID:detailsData.id,code:reqdata.grider}
		}).then(
			ElMessage.success("指派成功"),
			router.push({path:'/supervisionData'})
		)
	}
	//清空省表
	let emptyProvince = function(){
		provinceList.splice(0,provinceList.length)
	}
	//清空市表
	let emptyCity = function(){
		cityList.splice(0,cityList.length)
	}
	//清空网格员表
	let emptyGrider = function(){
		griderList.splice(0,griderList.length)
	}
	//返回到列表页面
	let back = function(){
		router.push({
			path:'/supervisionData'
		})
	}
</script>

<style scoped>
	.app{
		width: 100%;
	}
	.title{
		font-size: 15px;
	}
	.tag{
		margin-right: 10px;
	}
	.operation{
		margin-top: 5vw;
		width:100%;
		display: flex;
	}
	.flag{
		margin-right: 30px;
	}
	.provinceSearch{
		margin-right: 30px;
	}
	.citySearch{
		margin-right: 30px;
	}
	.grider{
		margin-right: 50px;
	}
</style>